<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>页面</title>
	<link rel="stylesheet" href="css/iconfont.css">
	<style type="text/css">

	.wrapper{
		
		width: 400px;
		min-height: 350px;
		border: 1px solid #ccc;
		margin-top: 100px;
		
	}
	.header{
		height: 45px;
		line-height: 45px;
		background-color: #80b9f5;
		text-align: center;
		color: #fff;
	}
	.header h3{
		margin: 0;
		padding-right: 20px;
		text-align: center;
		
	}
	.item button{
			background-color: #8eb9f5;
			color: #fff;
			height: 35px;
			line-height: 35px;
			margin-top: 15px;
			margin-right: 10px;
			border: none;
			border-radius: 5px;
		}

	
	</style>
</head>
<body>
	<div  class="wrapper">
		<div class="header">
			<h3><span class="iconfont icon-fanhui"  style="float: left; margin-left: 30px; font-size: 20px;"></span>请选择省份</h3>
	
			
		</div>
		<!--省-->
		<div class="area-wrapper" style="position: relative;">
		
		<!--区-->
		

		<div class="province item">
			<button>广西壮族自治区</button>
			<button>广东</button>
			<button>河南</button>
			<button>湖南</button>
		</div>

	    <div class="city item"   style="position: absolute;border: 1px solid #ccc;top:-45px;left: 420px;width: 400px;height: 200px; display: none;">
	    	<button>南宁</button>
			<button>柳州</button>
			<button>河池</button>
			<button>东莞</button>
			<button>荆州</button>
			<button>长沙</button>
	    	
	    </div>

	   <div class="area item" style="position: absolute;border: 1px solid #ccc;top:-45px;left: 860px;width: 400px;height: 200px;display: none;">
			<button>西乡塘区</button>
			<button>江南区</button>
			<button>青秀区</button>
			<button>福锦区</button>
			<button>博白县</button>
			<button>陆川县</button>
			<button>鱼峰区</button>
			<button>城中区</button>
			<button>柳城县</button>
			<button>惠阳区</button>
			<button>惠东县</button>
			<button>博罗县</button>
			<button>宝安区</button>
			<button>福田区</button>
		</div>
		</div>
	<script type="text/javascript" src="js/jquery3.js"></script>
	<script type="text/javascript">
		$('.icon-fanhui').click(function(){
			console.log('--我要返回去--');
			/**city框的隐藏状态*/
			var cflag=$('.city').css('display');
			/**area**/
			var aflag=$('.area').css('display');
			if (cflag=='block'&&aflag=='block');{
				$('.area').hide();

			}
			if(cflag=='block' && aflag=='none'){
				$('.city').hide();

			}
			console.log('city的显/隐状态'+cflag);
		})




	/**初始化省份div框
	1. 先把省份div框中的静态数据移除掉
	**/
	function showarea(btn){
		/**获取省份按钮的value值---id**/
		var cid =$(btn).val();

		/**隐藏province ,area 这两个div,同时展示city面板的内容*/
		$('.province').show();
		$('.area').show();
		$('.city').show();
		/**  获取并过滤数据**/
		$.get('data/area.json',function(res){
			/**过滤数据**/
			var tmp=[];
			for (var i=0;i<res.length;i++){
				if (cid ==res[i].pid){
					tmp.push(res[i]);
				}
			}
		/**显示数据*/
		$('.area').empty();
		for (var i=0;i<tmp.length;i++){
			var btn = '<button onclick="showarea(this)" value="'+tmp[i].id+'">'+tmp[i].name+'</button>';
			$('.area').append(btn);
					}
				});
	}
	function showcity(btn){
		/**获取省份按钮的value值---id**/
		var pid=$(btn).val();
		console.log("省份id==="+pid);
		/**隐藏provine,area这两个div，，同时展示city面板内容*/
		$('.province').show();
		$('.area').hide();
		$('.city').show();
	
		/**获取所有城市信息并过滤**/
		$.get('data/city.json',function(res){
			/**过滤城市的数据*/
			var tmp=[];
			for (var i=0; i<res.length;i++){
				if (pid==res[i].pid){
					tmp.push(res[i]);
				}
			}
			/**将省份下面的城市显示到.city div 下面*/
			$('.city').empty();
			for (var i=0; i<tmp.length;i++){
				var btn = '<button onclick="showarea(this)" value="'+tmp[i].id+'">'+tmp[i].name+'</button>';
				$('.city').append(btn);
			}
		})

	}

	function Initprovind(){

		$('.province').empty();

		$.get('data/province.json',function(res){
			console.log(res);
			
			for(var i=0;i<res.length;i++){
				var btn = '<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
				$('.province').append(btn);
			}
		});

	
	}


	Initprovind();

	




	</script>

</body>
</html>